<template>
	<view class="container">
		<!-- 自定义状态栏 -->
		<!-- <custom-status-bar gradient-type="assistant"></custom-status-bar> -->
		
		<!-- 页面标题 -->
		
		<!-- 交易记录列表 -->
		<scroll-view class="orders-scroll" scroll-y="true">
			<view v-if="orderList.length === 0" class="empty-container">
				<image class="empty-icon" src="/static/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无交易记录</text>
			</view>
			
			<view v-else>
				<view class="order-item" v-for="(order, index) in orderList" :key="index" @click="viewOrderDetail(order)">
					<view class="order-header">
						<text class="order-id">订单号: {{ order.id }}</text>
						<text class="order-status" :class="getStatusClass(order.status)">{{ order.status }}</text>
					</view>
					<view class="order-content">
						<image class="book-cover" :src="order.bookCover" mode="aspectFill"></image>
						<view class="order-info">
							<text class="book-title">{{ order.bookTitle }}</text>
							<text class="book-author">{{ order.bookAuthor }}</text>
							<text class="order-time">{{ order.time }}</text>
						</view>
						<view class="order-price">
							<text class="price">¥{{ order.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// #ifdef APP
	// import customStatusBar from "@/components/custom-status-bar/custom-status-bar.vue";
	// #endif
	
	export default {
		// #ifdef APP
		// components: {
		// 	customStatusBar
		// },
		// #endif
		data() {
			return {
				orderList: [
					{
						id: '20230401001',
						bookTitle: 'JavaScript高级程序设计',
						bookAuthor: 'Nicholas C. Zakas',
						bookCover: 'https://img9.doubanio.com/view/subject/l/public/s27958514.jpg',
						price: '98.00',
						status: '已完成',
						time: '2023-04-01 15:30'
					},
					{
						id: '20230328002',
						bookTitle: 'Vue.js实战',
						bookAuthor: '梁灏',
						bookCover: 'https://img9.doubanio.com/view/subject/l/public/s29725960.jpg',
						price: '79.00',
						status: '已完成',
						time: '2023-03-28 10:15'
					},
					{
						id: '20230322003',
						bookTitle: '深入浅出Node.js',
						bookAuthor: '朴灵',
						bookCover: 'https://img9.doubanio.com/view/subject/l/public/s27958514.jpg',
						price: '89.00',
						status: '已取消',
						time: '2023-03-22 14:20'
					},
					{
						id: '20230315004',
						bookTitle: 'CSS权威指南',
						bookAuthor: 'Eric A. Meyer',
						bookCover: 'https://img9.doubanio.com/view/subject/l/public/s27958514.jpg',
						price: '128.00',
						status: '已完成',
						time: '2023-03-15 09:45'
					}
				]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '交易记录'
			});
		},
		methods: {
			getStatusClass(status) {
				switch (status) {
					case '已完成':
						return 'status-completed';
					case '已取消':
						return 'status-cancelled';
					case '处理中':
						return 'status-processing';
					default:
						return '';
				}
			},
			viewOrderDetail(order) {
				// 跳转到订单详情页面
				uni.showToast({
					title: '查看订单详情',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88rpx;
	background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
}

.orders-scroll {
	flex: 1;
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #eee;
}

.order-id {
	font-size: 28rpx;
	color: #333;
}

.order-status {
	font-size: 24rpx;
	padding: 5rpx 15rpx;
	border-radius: 20rpx;
}

.status-completed {
	background-color: #e8f7f0;
	color: #09b36b;
}

.status-cancelled {
	background-color: #fdeeee;
	color: #f56c6c;
}

.status-processing {
	background-color: #ecf5ff;
	color: #409eff;
}

.order-content {
	display: flex;
	flex-direction: row;
	padding-top: 20rpx;
}

.book-cover {
	width: 120rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.order-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.book-title {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}

.book-author {
	font-size: 26rpx;
	color: #999;
}

.order-time {
	font-size: 24rpx;
	color: #999;
}

.order-price {
	display: flex;
	align-items: flex-end;
}

.price {
	font-size: 32rpx;
	color: #ff5a5f;
	font-weight: bold;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 30rpx;
	color: #999;
}
</style>